<template>
	<el-dialog v-model="visible" :destroy-on-close="true" :width="500" top="5" title="用户密码修改">
		<el-form ref="ruleFormRef" label-position="top" :rules="rules" :model="formData" label-width="100px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="原密码" prop="oldPassword" clearable>
						<el-input type="password" v-model="formData!.oldPassword" placeholder="请输入原密码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="新密码" prop="password" clearable>
						<el-input type="password" v-model="formData!.password" placeholder="请输入新密码"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="确认密码" prop="confirmPassword" clearable>
						<el-input type="password" v-model="formData!.confirmPassword" placeholder="请再次输入新密码"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance, FormRules, ElMessageBox } from 'element-plus';
import rulesObj from './rules';
import { editPassword } from '/@/api/auth/user'
import { useHandleData } from '/@/hooks/useHandleData';
const formData = reactive<any>({
	oldPassword: '',
	password: '',
	confirmPassword: '',
});

const acceptParams = () => {
	visible.value = true;
}

//验证规则
const rules = reactive<FormRules>(rulesObj), visible = ref<boolean>(false), loading = ref<boolean>(false);

const ruleFormRef = ref<FormInstance>();

const emits = defineEmits(['update-success'])

const handleSubmit = () => {
	ruleFormRef.value!.validate((valid) => {
		if(!valid) return;
		useHandleData(editPassword, formData, '修改密码').then(async(res:any) => {
			if(res && res.code === 0) {
				visible.value = false;
				emits('update-success')
			}
		})

	});
}

defineExpose({
	acceptParams,
});
</script>
